/**
 * Created by wuhaiyang on 2017/4/13.
 */


import React, {Component, PropTypes} from 'react'

import {
    StyleSheet,
    View,
    StatusBar,
    Text,
    Platform
} from 'react-native'
const checkStatusBarStyle = {
    backgroundColor: PropTypes.string,
    barStyle: PropTypes.oneOf(['default', 'light-content', 'dark-content']),
    hidden: PropTypes.bool
}

const NAV_IOS_HEIGHT = 44
const NAV_ANDROID_HEIGHT = 50

export default class NavigationToolbar1 extends Component {

    static propTypes = {
        leftView: PropTypes.element,
        title: PropTypes.string,
        titleView: PropTypes.element,
        rightView: PropTypes.element,
        statusBar: PropTypes.shape(checkStatusBarStyle),
        style: View.propTypes.style
    }
    static defaultProps = {
        statusBar: {
            barStyle: 'light-content',
            hidden: false,
            backgroundColor:'red'
        }
    }

    constructor(props) {
        super(props)
    }

    renderLeftView() {
        return this.props.leftView
    }

    renderTitleView() {
        return this.props.titleView ? this.props.titleView : <Text style={styles.title}>
                {this.props.title}
            </Text>
    }

    renderRightView() {
        return this.props.rightView
    }

    render() {
        let StatusBarComponent =
            <View style={styles.statusBar}>
                <StatusBar {...this.props.statusBar}/>
            </View>
        let ContentComponent =
            <View style={styles.contentContainer}>
                {this.renderLeftView()}
                <View style={styles.titleContainer}>
                    {this.renderTitleView()}
                </View>
                {this.renderRightView()}
            </View>
        return (
            <View style={[styles.container,this.props.style]}>
                {StatusBarComponent}
                {ContentComponent}
            </View>
        )

    }
}

const styles = StyleSheet.create({
    title: {
        fontSize: 18,
        color: 'white'
    },
    contentContainer: {
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        height: Platform.OS === 'ios' ? NAV_IOS_HEIGHT : NAV_ANDROID_HEIGHT
    },
    titleContainer: {
        position: 'absolute',
        left: 60,
        right: 60,
        top: 0,
        bottom: 0,
        alignItems: 'center',
        justifyContent: 'center'
    },
    container: {
        backgroundColor: '#2196f3',
        justifyContent: 'center'
    },
    statusBar: {
        height: Platform.OS === 'ios' ? 20 : 0
    }
})